<template>
    <div class="uploader-image">
        <div class="uploader-box clear">
            <div class="uploader-inner cover-uploader">
                <uploader class="uploader-example" 
                    :options="options"
                    :autoStart="true" ref="uploaderImg" 
                    :file-status-text="statusText" 
                    @files-submitted="fileSubmitImg"
                    @file-success="fileSuccessImg"
                    @file-error="fileFailImg">
                    <uploader-unsupport></uploader-unsupport>
                    <uploader-btn :directory="false" :attrs="attrsImg" :single="true">
                        <img v-if="picture" :src="this.BASE_URL + picture">
                        <i v-else class="el-icon-upload"></i>
                    </uploader-btn>
                    <uploader-list></uploader-list>
                    <div class="uploader-close-box" v-show="picture">
                        <label class="el-upload-list__item-status-label" @click="pictureRemove">
                            <transition name="el-fade-in-linear">
                                <i class="el-icon-upload-success el-icon-check"></i>
                            </transition>
                            <transition name="el-fade-in-linear">
                                <i class="el-icon-close"></i>
                            </transition>
                        </label>
                    </div>
                </uploader>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        options: Object,/*请求头配置项 */
        picture: String,/*图片路径 */
    },
    data() {
        return {
            statusText: {
                    success: "上传成功",
                    error: "上传出错",
                    uploading: "正在上传...",
                    paused: "暂停",
                    waiting: "等待上传..."
            },
            attrsImg: {
                accept: ['image/*']
            },
        };
    },
    methods: {
    //过滤文件格式
        fileSubmitImg(files, fileList, event){
            for (var i = 0 ; i < fileList.length ; i++ ) {
                var file_type = fileList[i].fileType.toLocaleLowerCase();

                var ext = fileList[i].name.split('.').pop().toLocaleLowerCase();
                var file_type = ['bmp', 'jpg', 'png','gif','jpeg','ico']

                if( !file_type.includes(ext) ){
                    this.$message.warning('不允许上传的图片格式')
                    this.$refs.uploaderImg.uploader.removeFile( fileList[i] );
                }else if( fileList[i].size > 2048000 ){
                    this.$message.warning('只允许上传2M以内的文件');
                    this.$refs.uploaderImg.uploader.removeFile( fileList[i] );
                }else{
                    if( this.$refs.uploaderImg.uploader.fileList.length  > 1  ){
                        //删除第一张图片
                        this.$refs.uploaderImg.uploader.removeFile( this.$refs.uploaderImg.uploader.fileList[0] );
                    }

                    fileList[i].fileType = 'image/png'
                    fileList[i].name = fileList[i].name.replace(/\.\w+$/, '.png')
                    fileList[i].relativePath = fileList[i].relativePath.replace(/\.\w+$/, '.png')
                }
            }      
        },
        pictureRemove() {
			this.$refs.uploaderImg.uploader.cancel();
            this.$emit('imgListen','');
		},
        //上传成功的事件
		fileSuccessImg(rootFile, file, message, chunk) {
            var mess = JSON.parse(message);
                mess = handleResponseData(mess)
			if (parseInt(mess.data.status) === 1) {
                this.$emit('imgListen', mess.data);
			}
        },
        fileFailImg(rootFile, file, message, chunk) {
			var mess = eval("(" + message + ")");
			if (parseInt(mess.error) === 401) {
			    let callbcak = data => {
			        this.$refs.uploaderImg.retry(file);
			    };
			    this.get_access_token(callbcak);
			}
        },
    }
};
</script>


